<template>
  <div class="pay-password">
    <loading :show="loading" />
    <div class="notice">
      <p>请认真填写,主要用途:</p>
      <p>1, 提现操作</p>
      <p v-if="false">2, 商家支付</p>
    </div>
    <div class="form">
      <p v-if="isExist">
        <label>旧密码:</label>
        <span>
          <cube-input type="password" v-model.trim="postForm.old_password" :eye="{open: false, reverse: false}" />
        </span>
      </p>
      <p>
        <label>密码:</label>
        <span>
          <cube-input type="password" v-model.trim="postForm.password1" :eye="{open: false, reverse: false}" />
        </span>
      </p>
      <p>
        <label>重复密码:</label>
        <span>
          <cube-input type="password" v-model.trim="postForm.password2" :eye="{open: false, reverse: false}" />
        </span>
      </p>
      <p class="submit">
        <span @click="save">保存</span>
        <span @click="$router.push('/service/reset-password')" style="margin-left: 10px; background: red">忘记密码</span>
      </p>
    </div>
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'PayPassword',
  components: {
    Loading
  },
  data() {
    return {
      postForm: {},
      loading: false,
      disabled: false,
      isExist: false
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      api.Exec.checkPayPassword().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.isExist = data.result
      }).finally(() => {
        this.loading = false
      })
    },
    _check() {
      if (this.isExist) {
        if (!this.postForm.old_password) {
          this.$createToast({
            type: 'error',
            txt: '请输入旧密码',
            time: 1000
          }).show()
          return false
        }
      }
      if (!this.postForm.password1 || !this.postForm.password2) {
        this.$createToast({
          type: 'error',
          txt: '请填写完整',
          time: 1000
        }).show()
        return false
      }
      if (this.postForm.password1 !== this.postForm.password2) {
        this.$createToast({
          type: 'error',
          txt: '两次输入密码不一致',
          time: 1000
        }).show()
        return false
      }
      if (this.postForm.password1.length < 6) {
        this.$createToast({
          type: 'error',
          txt: '密码长度不能小于6位',
          time: 1000
        }).show()
        return false
      }
      return true
    },
    save() {
      if (this._check()) {
        if (!this.disabled) {
          this.loading = true
          this.disabled = true
          api.Exec.editPayPassword({ ...this.postForm }).then(() => {
            this.$createToast({
              type: 'correct',
              txt: '操作成功',
              time: 300
            }).show()
            // show is exist
            this.isExist = true
            this.postForm = {}
          }).finally(() => {
            this.loading = false
            this.disabled = false
          })
        }
      }
    }
  },
  created () {
    this.fetchData()
  }
}
</script>

<style scoped lang="stylus">
.pay-password
  .notice
    background white
    padding 10px
    border-radius 10px
    font-size 14px
    p
      line-height 30px
  .form
    margin 10px 0
    padding 20px 10px
    background white
    border-radius 10px
    p
      display flex
      height 40px
      line-height 40px
      margin-bottom 10px
      label
        width 85px
        text-align right
        padding-right 10px
        font-weight 700
        font-size 14px
      span
        flex 1
        padding-right 15px
      &.submit
        display block
        height 33px
        line-height 33px
        span
          display inline-block
          background $main_color
          color white
          padding 0 50px
          border-radius 15px
</style>
